<template>
    <div class="light-Ct">
        <div class="item-Cd">
            <div @click="seeNodeDetail(index, item)" class="light-circle" style="position: relative;" :class="{
                'light-green': item.nodeState == 1,
                'light-red': item.nodeState == 0,
                'light-orange': item.nodeState == 2,
            }">
                {{ item.percent }}
            </div>

            <div class="item-name">
                <div v-if="!isEditing" @click="startEdit" class="pointers">{{ item.nodeName }}</div>
                <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput"
                    style="width: 200px;" />
            </div>

            <div class="operation">
                <a @click="addBrotherItem(index, item)">同级 +</a>
                <span>|</span>
                <a @click="addChildItem(index, item)">子级 +</a>
                <span>|</span>
                <a @click="deleteItem(index, item)">删除</a>
            </div>

            <div class="item-info">
                <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
                <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
            </div>

            <!-- <div style="margin-top: 10px;">id: {{ item.id }}</div>
            <div>nodeState: {{ item.nodeState }}</div> -->

            <div class="item-btn"><a @click="testIntem(index, item)">编辑</a></div>

        </div>
        <div v-if="item.children && item.children.length"
            :class="item.children && item.children.length ? 'childItem childItemSon' : 'childItem'">
            <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child"
                :index="childIndex" @editItem="editItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem"
                @deleteItem="deleteItem" @testIntem="testIntem" @seeNodeDetail="seeNodeDetail" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, onUnmounted, nextTick } from 'vue';
import RecursiveItem from './RecursiveItem.vue';
import { formatDateTime } from "@/utils/format";
// import { ElMessage } from 'element-plus';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    }
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem',]);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);
const editInput = ref(null);

const startEdit = () => {
    isEditing.value = true;
    nextTick(() => {
        if (isEditing.value && editInput.value)  {
            editInput.value.focus();
        }
    });
};

const finishEdit = () => {
    isEditing.value = false;
    if (!editedName.value) {
        // editedName.value = props.item.nodeName;
        return //ElMessage.error("请输入节点名称");
    }
    if (editedName.value !== props.item.nodeName) {
        emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
    }
};

const testIntem = (index, item) => {
    emit('testIntem', index, item);
};

const editItem = (index, item) => {
    emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
    emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
    emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
    emit('deleteItem', index, item);
};

const seeNodeDetail = (index, item) => {
    emit('seeNodeDetail', index, item)
};

onMounted(() => {

});

onUnmounted(() => {

});

</script>

<style lang="scss" scoped>
.light-Ct {
  padding-left: 20px; /* 每一级的缩进 */
}

.item-Cd {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  background-color: #f9f9f9;
}

.light-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  top: 5px;
}

.light-green {
  background-color: green;
  color: white;
}

.light-red {
  background-color: red;
  color: white;
}

.light-orange {
  background-color: orange;
  color: white;
}

.item-name {
  margin-top: 10px;
  font-weight: bold;
}

.pointers {
  cursor: pointer;
}

.operation {
  margin-top: 10px;
  font-size: 12px;
}

.operation a {
  cursor: pointer;
  text-decoration: none;
  color: #007bff;
}

.operation span {
  margin: 0 5px;
}

.item-info {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.item-btn a {
  cursor: pointer;
  text-decoration: none;
  color: #007bff;
}

/* 子节点样式 */
.childItem {
  margin-left: 20px; /* 子节点的额外缩进 */
  border-left: 1px dashed #ccc;
  padding-left: 10px;
}

.childItemSon {
  margin-top: 10px;
}
</style>